/*
 * ===========================================
 * Element Plus 表单组件样式
 * ===========================================
 * 基于新设计系统的 Element Plus 组件样式覆盖
 */

/* ===========================================
 * 输入框组件 (Input)
 * =========================================== */

.el-input {
	.el-input__wrapper {
		border-radius: var(--radius-lg) !important;
		border: 1px solid var(--input-border);
		box-shadow: var(--input-shadow);
		transition: all var(--transition-base);
		background: var(--input-bg);

		&:hover {
			border-color: var(--brand-primary);
			box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
		}

		&.is-focus {
			border-color: var(--input-focus-border);
			box-shadow: var(--input-focus-shadow);
		}
	}

	.el-input__inner {
		color: var(--input-text);
		font-size: var(--font-size-sm);

		&::placeholder {
			color: var(--input-placeholder);
		}
	}

	&.is-disabled {
		.el-input__wrapper {
			background-color: var(--input-disabled-bg);
			border-color: var(--input-disabled-border);

			.el-input__inner {
				color: var(--input-disabled-text);
			}
		}
	}
}

/* 文本域组件 */
.el-textarea {
	.el-textarea__inner {
		background-color: var(--input-bg) !important;
		border-radius: var(--radius-lg) !important;
		border: 1px solid var(--input-border);
		box-shadow: var(--input-shadow);
		transition: all var(--transition-base);
		color: var(--input-text);
		font-size: var(--font-size-sm);

		&:focus {
			border-color: var(--input-focus-border);
			box-shadow: var(--input-focus-shadow);
		}
	}
}

/* ===========================================
 * 选择器组件 (Select)
 * =========================================== */

.el-select {
	.el-select__wrapper {
		border-radius: var(--radius-lg) !important;
		border: 1px solid var(--input-border);
		box-shadow: var(--input-shadow);
		transition: all var(--transition-base);
		background: var(--input-bg);

		&:hover {
			border-color: var(--brand-primary);
			box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
		}

		&.is-focused {
			border-color: var(--input-focus-border);
			box-shadow: var(--input-focus-shadow);
		}

		&.is-focused:hover {
			border-color: var(--input-focus-border);
			box-shadow: var(--input-focus-shadow);
		}
	}

	&.is-dropdown-visible,
	&.is-open,
	&.is-active {
		.el-select__wrapper {
			border-color: var(--input-focus-border);
			box-shadow: var(--input-focus-shadow);
		}
	}

	.el-select__selected-item {
		color: var(--input-text);
		font-size: var(--font-size-sm);
	}

	.is-transparent {
		color: var(--input-placeholder);
	}

	// .el-select__placeholder {
	// 	color: var(--input-placeholder);
	// }

	.el-select__caret {
		color: var(--text-tertiary);
	}

	&.is-disabled {
		.el-select__wrapper {
			background-color: var(--input-disabled-bg);
			border-color: var(--input-disabled-border);

			.el-select__selected-item {
				color: var(--input-disabled-text);
			}
		}
	}
}

/* 选择器下拉菜单 */
.el-select-dropdown {
	background-color: var(--card-bg);
	border: 1px solid var(--card-border) !important;
	border-radius: var(--radius-xl) !important;
	box-shadow: var(--card-shadow) !important;
	backdrop-filter: var(--card-backdrop);
	padding: var(--space-1) !important;
	margin: 0 !important;

	.el-select-dropdown__item {
		color: var(--text-primary);
		font-size: var(--font-size-sm);
		padding: var(--space-2) var(--space-3);
		transition: all var(--transition-fast);
		border-radius: var(--radius-md);
		margin: var(--space-1) 0;
		line-height: var(--line-height-normal);

		&.is-hovering,
		&:hover {
			background-color: var(--content-hover-bg) !important;
			color: var(--text-link) !important;
		}

		&.is-selected {
			background-color: var(--brand-primary-50) !important;
			color: var(--text-primary) !important;
			font-weight: var(--font-weight-medium) !important;
		}

		&:focus {
			background: var(--content-hover-bg) !important;
			outline: none;
		}
	}
}

/* 弹出层样式 */
.el-popper {
	border: 1px solid var(--card-border) !important;
	backdrop-filter: var(--card-backdrop);
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--card-shadow) !important;
	background-color: var(--card-bg) !important;

	.el-select-dropdown {
		border: none !important;
		box-shadow: none !important;
	}

	.el-popper__arrow {
		&::before {
			border-color: var(--card-border) !important;
			background-color: var(--card-bg) !important;
		}
	}
}

/* ===========================================
 * 按钮组件 (Button)
 * =========================================== */

.el-button {
	border-radius: var(--radius-lg);
	font-weight: var(--font-weight-medium);
	transition: all var(--transition-base);
	font-size: var(--font-size-sm);

	&.el-button--primary {
		background: var(--button-primary-bg);
		border: 1px solid var(--button-primary-border);
		color: var(--button-primary-text);
		box-shadow: var(--button-primary-shadow);

		&:hover {
			background: var(--button-primary-hover-bg);
			box-shadow: var(--button-primary-hover-shadow);
			transform: var(--button-primary-hover-transform);
		}

		&:active {
			background: var(--button-primary-active-bg);
			transform: var(--button-primary-active-transform);
		}
	}

	&.el-button--default {
		background-color: var(--button-secondary-bg);
		border: 1px solid var(--button-secondary-border);
		color: var(--button-secondary-text);
		box-shadow: var(--button-secondary-shadow);

		&:hover {
			background-color: var(--button-secondary-hover-bg);
			border-color: var(--button-secondary-hover-border);
			color: var(--button-secondary-hover-text);
		}
	}

	&.is-loading {
		transform: none;
	}
}

/* ===========================================
 * 单选按钮组件 (Radio)
 * =========================================== */

.el-radio-group {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;

	.el-radio {
		margin-right: 0;

		.el-radio__input {
			.el-radio__inner {
				border-color: var(--input-border);
				background-color: var(--input-bg);

				&:hover {
					border-color: var(--brand-primary);
				}
			}

			&.is-checked {
				.el-radio__inner {
					background-color: var(--brand-primary);
					border-color: var(--brand-primary);

					&::after {
						background-color: var(--color-white);
					}
				}
			}
		}

		.el-radio__label {
			color: var(--text-primary);
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-medium);
			padding-left: var(--space-2);
		}
	}
}

/* ===========================================
 * 表单项组件 (Form Item)
 * =========================================== */

.el-form-item {
	margin-bottom: var(--space-4);

	.el-form-item__label {
		color: var(--text-primary);
		font-weight: var(--font-weight-medium);
		font-size: var(--font-size-sm);
	}

	.el-form-item__error {
		color: var(--color-error);
		font-size: var(--font-size-xs);
		margin-top: var(--space-1);
	}
}

/* ===========================================
 * 进度条组件 (Progress)
 * =========================================== */

.el-progress {
	.el-progress-bar {
		.el-progress-bar__outer {
			background-color: var(--gray-200);
			border-radius: var(--radius-base);

			.el-progress-bar__inner {
				background: var(--brand-primary);
				border-radius: var(--radius-base);
				transition: width var(--transition-base);
			}
		}
	}
}

/* ===========================================
 * 表格组件 (Table)
 * =========================================== */

.el-table {
	background-color: var(--table-bg);
	color: var(--text-primary);
	border: 1px solid var(--table-border);
	border-radius: var(--radius-lg);
	overflow: hidden;

	.el-table__header {
		background-color: var(--table-header-bg);

		th {
			background-color: var(--table-header-bg);
			color: var(--table-header-text);
			border-bottom: 1px solid var(--table-border);
			font-weight: var(--font-weight-semibold);
		}
	}

	.el-table__body {
		tr {
			background-color: var(--table-row-bg);

			&:hover {
				background-color: var(--table-row-hover-bg);
			}

			&:nth-child(even) {
				background-color: var(--table-row-alt-bg);

				&:hover {
					.el-table__cell {
						background-color: var(--table-row-hover-bg) !important;
					}
				}
			}

			td {
				border-bottom: 1px solid var(--table-border);
				color: var(--text-primary);
			}
		}
	}
}

/* ===========================================
 * 空状态组件 (Empty)
 * =========================================== */

.el-empty {
	.el-empty__image {
		svg {
			color: var(--text-tertiary);
		}
	}

	.el-empty__description {
		color: var(--text-secondary);
		font-size: var(--font-size-sm);
	}
}

/* ===========================================
 * 骨架屏组件 (Skeleton)
 * =========================================== */

.el-skeleton {
	.el-skeleton__item {
		background: var(--gray-200);

		&::after {
			background: linear-gradient(
				90deg,
				transparent,
				rgba(255, 255, 255, 0.6),
				transparent
			);
		}
	}
}
